AWS>ラーニングパス>フロントエンドデベロッパー

react

React アプリをデプロイしてホストする (10 分): React アプリを作成し、AWS Amplify を介してデプロイしてホストします。

ローカルアプリを初期化する (5 分): AWS Amplify を使用してローカルアプリを初期化します。

認証を追加する (10 分): アプリケーションに認証を追加します。

GraphQL API とデータベースを追加する (15 分): GraphQL API を作成します。

画像を保存する機能を追加する (10 分): アプリにストレージを追加します。

create-react-app

githubにおく

amplify console

githubでボタンポチポチする

あとはブランチ見てgit pushみて勝手にデプロイしてくれる

すごい！

npm install -g @aws-amplify/cli

https://www.youtube.com/watch?v=fWbM5DLh25U

amplify-user作成した

amplify pullとかした

よくわからん

適当にapi追加でgraphqlが生えた

なるほど

左メニューのビルドの設定からymlをいじれる

これ、あとあと消した

消したら動いた

これはもともとチェックあった

これも発生した

code:log

# Executing command: amplifyPush --simple

# Getting Amplify CLI Cloud-Formation stack info from environment cache

# Start initializing Amplify environment: main

# Initializing new Amplify environment: main (amplify init)

File project: data should NOT have additional properties: 'graphqltransformer'

JSONValidationError: File project: data should NOT have additional properties: 'graphqltransformer'

https://gyazo.com/65a81cbc1c10ae962bcb7efbbdbccffc

localでは最新を使ってたので、ここで最新を明示した

これを設定したあと、なぜかroleが無いとか言われた

ロールを素直に作って割り当てた

code:js

Auth.configure(awsConfig);　// stagingやproductionで動かす際にはこの1行が必要です。

これ、awsのハンズオンには無かったので嵌められた

デプロイ環境だけでエラーが起きるのでわけがわからんかった

でもまだ治らない

推測

当初、サーバ側のamplifyのバージョンが古かった

おそらくこれは、amplifyのバージョンを上げたら解決するものだった

latest指定したあと、ビルドの設定のymlを戻したら動いたので

一見たくさんのエラーに苦しんだように見えるが、じつは一つだった

同時に複数のことをやろうとして、結果として変になった

正しい修正と

古いバージョンでの一時的対処

これを同時にやってしまった